<route lang="json5">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '分组讨论',
  },
}
</route>
<template>
  <view class="bg-[#f5f5f5]">
    <!-- 顶部导航栏 -->
    <wd-navbar
      title="分组讨论"
      left-arrow
      placeholder
      @click-left="handleBack"
      custom-style="background: #fff; border-bottom: none;"
      fixed
      safeAreaInsetTop
    ></wd-navbar>
    <view class="p-24rpx">
      <!-- 可滚动的聊天列表区域 -->
      <scroll-view
        scroll-y
        :scroll-anchoring="true"
        :enhanced="true"
        :bounces="false"
        :show-scrollbar="false"
        @touchmove.stop.prevent="() => {}"
      >
        <view
          class="bg-[#FFFFFF] flex border-rd-[10rpx_10rpx_10rpx_10rpx] mb-20rpx"
          v-for="(group, index) in groupInfo.groupList"
          :key="index"
          @click="handleClick(group)"
        >
          <view class="mt-22rpx ml-28rpx mb-22rpx mr-36rpx">
            <image
              class="w-96rpx h-96rpx"
              src="/static/images/icons/group.png"
              mode="scaleToFill"
            />
          </view>
          <view>
            <view class="font-bold text-30rpx text-[#3D3D3D] lh-41rpx mt-30rpx mb-9rpx">
              {{ group.name }}
            </view>
            <view class="font-400 text-22rpx text-[#999999] lh-30rpx">
              {{ group.createTime }}
            </view>
          </view>
        </view>
		
		<view v-if="groupInfo.groupList.length <= 0" 
		class="empty-state flex-center flex-col mt-200rpx">
		  <wd-status-tip :image="emptyImage" tip="暂无讨论组数据" />
		</view>
		
        <view v-if="groupInfo.groupList.length > 0" class="font-400 text-24rpx text-[#999999] lh-33rpx mt-24rpx text-center">
          已经全部加载完毕
        </view>
      </scroll-view>
    </view>
    <view class="absolute bottom-78rpx w-full">
      <view
        @click="addGroup"
        class="ml-64rpx mr-72rpx flex items-center justify-center h-88rpx bg-gradient-linear bg-gradient-[90deg,#0D53FF_2%,#20A4FF_100%] border-rd-[50rpx_50rpx_50rpx_50rpx] font-bold text-34rpx text-[#FFFFFF] lh-47rpx"
      >
        创建讨论组
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useGroupStore, useChatStore } from '@/store'
/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'
const groupStore = useGroupStore()
const chatStore = useChatStore()
const groupInfo = ref({
  courseId: '',
  groupList: [],
})
const handleBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.redirectTo({
      url: '/pages/course/detail',
    })
  }
}
onShow(() => {
  groupStore.loadGroup()
  const pages = getCurrentPages()
  const currentPage: any = pages[pages.length - 1]
  const options = currentPage.$page?.options || currentPage?.options || currentPage.$route.query
  if (options) {
    groupInfo.value.courseId = options.courseId
    groupInfo.value.groupList = groupStore
      .findCourseGroup(options.courseId)
      .filter((item) => !item.dissolve)
  }
})
const handleClick = (group: any) => {
  if (group.dissolve) {
    uni.showToast({
      title: '该群聊已解散!',
      icon: 'none',
      duration: 1500,
    })
  } else {
    const chatInfo = {
      type: 'GROUP',
      targetId: group.id,
      showName: group.name,
      headImage: group.headImage,
    }
    chatStore.openChat(chatInfo)
    uni.navigateTo({
      url: `/pages/chat/detail?id=${group.id}`,
    })
  }
}
function addGroup() {
  uni.navigateTo({
    url: `/pages/group/create-group?courseId=${groupInfo.value.courseId}`,
  })
}
</script>

<style lang="scss" scoped></style>
